<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>分类页</title>
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
		<link rel="stylesheet" type="text/css" href="../css/topbo_public.css" />
		<link rel="stylesheet" type="text/css" href="../css/we-chat.css" />
		<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/databese.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="classify">
			<div class="toop-public space-between">
				<a href="#" class="reverse backpage">
					<img src="../img/reverse.svg">
				</a>
				<h3 class="title">分类页</h3>
				<div class="function">
					<img src="../img/function.png">
				</div>
			</div>
			<form action="" method="" class="form">
				<input type="text" name="" id="" value="" placeholder="户外服装" class="search" />
			</form>

			<div class="option flex " id="option">
				<ul class="box-lef " id="opleft">
					<li class="active">热卖推荐</li>
					<li>汽车坐垫</li>
					<li>行车记录仪</li>
					<li>车机导航</li>
					<li>防冻液</li>
					<li>汽车坐垫</li>
					<li>摩托配件</li>
				</ul>

				<article class="box-rig">
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
					<ul class="opright space-around">

					</ul>
				</article>
			</div>

		</div>
		<script src="../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				app.touchend({
					el: '.backpage',
					path: 'first-page.html',
					effect: 'fade-in',
					time: 400,
				});
				
				app.touchend({
					 el:,
					 path:,
					 effect:,
					 time:400,
				})


			});

			/*动态渲染*/
			function state() {
				var opright = document.getElementsByClassName('opright');
				var n = 1;
				for (let u = 0; u < opright.length; u++) {

					mock.comList.forEach(function(obj, index) {
						let lit = document.createElement('li');
						opright[u].appendChild(lit)
						lit.className = 'list';

						let div = document.createElement('div');
						lit.appendChild(div);
						div.className = 'images';

						let img = document.createElement('img');
						img.src = obj.images;
						div.appendChild(img);


						let span = document.createElement('span');
						// console.log(obj.classtext);
						span.innerHTML += obj.classtext;
						lit.appendChild(span);

						// console.log(lit);
					})
				}
			}

			state();

			

			app.tab({
				elList: 'opleft',
				elSection: 'opright',
				elActive: 'active',
			});
		</script>
	</body>
</html>
